Ext.define('Qms.view.waiting.WaitingViewport', {
    extend: 'Ext.panel.Panel',
    padding: '',
    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;
        var waitingTokenStore = Ext.create("Qms.data.store.WaitingTokenStore");
        //var pluginExpanded = true;
        Ext.applyIf(me, {
                    items: [
                        {
                            xtype: 'gridpanel',
                            id: 'waitingScreenTokenGrid',
                            title: '',
                            forceFit: true,
                            anchor: '100%',
                            scroll: 'both',
                            columnLines: true,
                            store: waitingTokenStore,
                            region: 'center',
                            viewConfig:{
                                    stripeRows: false,
                                    forceFit: true,
                                    getRowClass: function(record, rowIndex, rowParams, store){
                                            var cssClass = "A"+record.get('tokenStatus');
                                            return cssClass;
                                    }
                            },
                            columns: [
                                {
                                    xtype : 'templatecolumn',
                                    dataIndex: 'tokenNo',
                                    text: 'Token No.',
                                    tpl: '<font size="6"><b>{tokenNo}</b></font>',
                                    width: 50
                                },
                                {
                                    xtype: 'templatecolumn',
                                    dataIndex: 'personName',
                                    text: 'Name',
                                    tpl: '<font size="4">'+
                                         '<b>{personName}</b>'+
                                         '</font>'
                                },
                                {
                                    xtype: 'templatecolumn',
                                    dataIndex: 'destinationName',
                                    text: 'Destination',
                                    tpl: '<font size="4">'+
                                         '<b>{destinationName}</b>'+
                                         '</font>'
                                }
                            ],
                            
                            viewConfig: {
                                    stripeRows: false
                            },
                            bbar: Ext.create('Ext.PagingToolbar', {
                            store: waitingTokenStore,
                            displayInfo: true,
                            displayMsg: 'Displaying topics {0} - {1} of {2}',
                            emptyMsg: "No topics to display",
                            items:[
                                    '-', 
                                    {
                                    text: 'Show Preview',
                                    //pressed: pluginExpanded,
                                    enableToggle: true,
                                    toggleHandler: function(btn, pressed) {
                                        var preview = Ext.getCmp('gv').getPlugin('preview');
                                        preview.toggleExpanded(pressed);
                                    }
                                }]
                            })
                        },
                        {
                            xtype: 'panel',
                            title: 'Important Message',
                            height: 90,
                            anchor: '100%',
                            region: 'south',
                            split: true,
                            collapsible: true,
                            animCollapse: true,
                            titleCollapse: true,
                            html: '<br>\n\
                                    <marquee>\n\
                                    <b>Office Time: 10:30 am to 06:30 pm</b>\n\
                                    </marquee>'
                        },
                        {
                            xtype: 'panel',
                            title: 'Promotion',
                            width: 150,
                            region: 'east',
                            split: true
                        }
                    ]
        });

        me.callParent(arguments);
    }

});